<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MonkeyCMS</title>
    <link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
    <link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
    <script type="text/javascript" src="statics/js/jquery.min.js"></script>
    <!--tabs-->
    <script type="text/javascript" src="statics/js/jquery.idtabs.min.js"></script>
    <!--editor-->
    <script type="text/javascript" src="statics/js/editor/kindeditor.min.js"></script>
    <script type="text/javascript" src="statics/js/editor/lang/zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="statics/js/editor/themes/default/default.css"/>
    <!--validator-->
    <script type="text/javascript" src="statics/js/koo.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //validator
            $('.u_form').Koo();

            //editor
            KindEditor.ready(function (K) {
                K.create('#content', {
                    themeType: 'default'
                });
            });
        });
    </script>

    <script type="text/javascript" src="statics/js/monkey.js"></script>
</head>

<body>
<!--page_header-->
<div class="page_header">
    <h3><span class="iconfont">&#xf044;</span>表单演示</h3>

    <p>包含常用表单的演示说明</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

    <!--tabs-->
    <div class="u_tab" id="tabs">
        <ul class="u_tab_items">
            <li class="u_tab_item"><a href="#tab1" class="selected">基本信息</a></li>
            <li class="u_tab_item"><a href="#tab2">富文本</a></li>
            <li class="u_tab_item"><a href="#tab3">表单验证</a></li>
        </ul>

        <div id="tab1" style="display: block;">
            <!--form-->
            <table class="u_table u_table_inbox">
                <form class="u_form" name="" method="post" action="#">
                    <tbody>
                    <tr>
                        <td width="140" align="right">表单项文本：</td>
                        <td>单行文本内容</td>
                    </tr>
                    <tr>
                        <td align="right">表单项文本：</td>
                        <td><input class="u_input" type="text"/></td>
                    </tr>
                    <tr class="u_form_item_error">
                        <td align="right"><span class="u_fom_required">*</span>表单项文本：</td>
                        <td>
                            <input class="u_input" type="text"/>
                            <span class="u_form_explain u_tiptext u_tiptext_error"> <i class="u_tiptext_icon iconfont"
                                                                                       title="出错">
                                &#xf057;</i>错误文字</span>
                        </td>
                    </tr>
                    <tr class="u_form_item_success">
                        <td align="right">单行文本：</td>
                        <td>
                            <input class="u_input" type="text"/>
                            <span class="u_form_explain u_tiptext u_tiptext_success"> <i class="u_tiptext_icon iconfont"
                                                                                         title="成功">
                                &#xf058;</i>成功文字。</span>
                        </td>
                    </tr>
                    <tr class="u_form_item_focus">
                        <td align="right">表单项文本：</td>
                        <td>
                            <input class="u_input" type="text"/>
                            <span class="u_form_other">焦点文本</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">不可用input：</td>
                        <td><input class="u_input u_input_disable" type="text" disabled></td>
                    </tr>
                    <tr>
                        <td align="right">下拉框：</td>
                        <td>
                            <select id="province" name="select" class="u_select">
                                <option value="">请选择</option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="天津">天津</option>
                                <option value="浙江">浙江</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">多选项：</td>
                        <td><input type="checkbox"/> 多选 <input type="checkbox"/> 多选</td>
                    </tr>
                    <tr>
                        <td align="right">单选项：</td>
                        <td><input type="radio"/> 单选 <input type="radio"/> 单选</td>
                    </tr>
                    <tr>
                        <td align="right">验证码：</td>
                        <td>
                            <input class="u_input u_input_checkcode" type="text" data-explain="请输入右图中字符，不区分大小写。"
                                   maxlength="4" autocomplete="off" value="" name="fourcode">
                            <img class="u_checkcode_imgcode_img" align="absMiddle" alt="请输入您看到的内容"
                                 src="https://omeo.alipay.com/service/checkcode?sessionID=82012ab6b1f4ed9e675fb9092a25cb3b&r=0.9321065918075809"
                                 title="点击刷新图片校验码">
                            <a href="#">看不清，换一张</a>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" class="u_button u_button_blue" value="确定">&nbsp;&nbsp;
                            <input type="button" class="u_button u_button_gray" value="取消">
                        </td>
                    </tr>

                    </tbody>
                </form>
            </table>
            <!--/form-->
        </div>

        <div id="tab2" style="display: none;">
            <!--editor-->
            <table class="u_table u_table_inbox">
                <tbody>
                <tr>
                    <td width="140" align="right">富文本：</td>
                    <td>
                        <textarea id="content" name="content"
                                  style="width:100%;height:450px;visibility:hidden;"></textarea>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--/editor-->
        </div>
        <div id="tab3" style="display: none;">
            <!--validator-->

            <form class="u_form" name="" method="post" action="#">
                <table class="u_table u_table_inbox">
                    <tbody>
                    <tr>
                        <td width="140" align="right">不能为空：</td>
                        <td>
                            <input type="text" class="u_input" check="need"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">只能输入数字：</td>
                        <td>
                            <input type="text" class="u_input" check="digit"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">只能输入中文字符：</td>
                        <td>
                            <input type="text" class="u_input" check="chinese"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">只能输入身份证号：</td>
                        <td>
                            <input type="text" class="u_input" check="card"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">给输入框绑定日期控件：</td>
                        <td>
                            <input type="text" class="u_input" check="date"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!--/validator-->
            </form>
        </div>

    </div>
    <!--/tabs-->

    <script type="text/javascript">$("#tabs ul").idTabs();</script>


</div>
<!--/page_main-->

</body>
</html>